<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="已提交" name="first">
      <el-table
        v-loading="loading"
        :data="list1"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="审议议题" align="center" prop="eventTitle" />
        <el-table-column label="议题类别" align="center" prop="eventType">
          <template slot-scope="scope">{{
            getDictLabel(
              dict.type.yitileixing,
              scope.row.eventType,
              "value",
              "label"
            )
          }}</template>
        </el-table-column>
        <el-table-column
          label="申请单位"
          align="center"
          prop="proposeCompany"
        />
        <el-table-column
          label="申请日期"
          align="center"
          prop="eventCreateTime"
        />
        <el-table-column label="状态" align="center" prop="eventStatus">
          <template slot-scope="scope">{{
            getDictLabel(eventStatusOptions, scope.row.eventStatus)
          }}</template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="toView(scope.row)"
              >查看</el-button
            >
            <!-- <el-button
            size="mini"
            type="text"
            @click="handleDelete(scope.row)"
          >审批</el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total1 > 0"
        :total="total1"
        :page.sync="queryParams1.pageNum"
        :limit.sync="queryParams1.pageSize"
        @pagination="getList"
      />
    </el-tab-pane>
    <el-tab-pane label="草稿箱" name="second">
      <el-table
        v-loading="loading"
        :data="postList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="审议议题" align="center" prop="eventTitle" />
        <el-table-column label="议题类别" align="center" prop="eventType">
          <template slot-scope="scope">{{
            getDictLabel(
              dict.type.yitileixing,
              scope.row.eventType,
              "value",
              "label"
            )
          }}</template>
        </el-table-column>
        <el-table-column
          label="申请单位"
          align="center"
          prop="proposeCompany"
        />
        <el-table-column
          label="申请日期"
          align="center"
          prop="eventCreateTime"
        />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="toEdit(scope.row)"
              >编辑</el-button
            >
            <!-- <el-button
            size="mini"
            type="text"
            @click="handleDelete(scope.row)"
          >审批</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total2 > 0"
        :total="total2"
        :page.sync="queryParams2.pageNum"
        :limit.sync="queryParams2.pageSize"
        @pagination="getList2"
      />
    </el-tab-pane>
    <el-dialog
      :title="title"
      top="2vh"
      class="abow_dialog"
      :visible.sync="visible"
      style="height: 800px"
      width="1050px"
      append-to-body
    >
      <detail :formData="formData" />
    </el-dialog>
    <!-- 打开事项提交的页面 -->
    <el-dialog
      :title="title"
      top="2vh"
      class="abow_dialog"
      :visible.sync="visibleCommitDialog"
      style="height: 800px"
      width="1050px"
      append-to-body
    >
      <shi-xiang-ti-jiao :formData="formData" @callback="callback" />
    </el-dialog>
  </el-tabs>
</template>
<script>
import {
  listPost,
  getPost,
  delPost,
  addPost,
  updatePost,
} from "@/api/majorIssues/shixiang.js";
import Detail from "../xiangqin";
import ShiXiangTiJiao from "../shixiangtijiao";
import { getDictLabel } from "@/utils/Util.js";
export default {
  dicts: ["yitileixing"],
  data() {
    return {
      getDictLabel: getDictLabel,
      eventStatusOptions: [
        {
          value: 0,
          label: "草稿",
        },
        {
          value: 1,
          label: "已提交",
        },
        {
          value: 2,
          label: "已完成",
        },
      ],
      visible: false, // 打开详情的弹窗
      visibleCommitDialog: false, // 事项提交的编辑
      activeName: "first",
      loading: false,
      // 总条数 已提交
      total1: 0,
      total2: 0, // 草稿
      // 查询参数 , 已提交 1
      queryParams1: {
        //
        eventStatus: 1,
        pageNum: 1,
        pageSize: 10,
      },
      // 草稿箱 0
      queryParams2: {
        eventStatus: 0,
        pageNum: 1,
        pageSize: 10,
      },
      title: "",
      list1: [{ postId: 1 }],
      postList: [{ postId: 1 }],
      formData: {},
    };
  },
  components: {
    Detail,
    ShiXiangTiJiao,
  },
  mounted() {
    // 从store取当前userId
    this.queryParams1.createUserId = this.$store.state.user.userId;
    // queryParams2也加上userId
    this.queryParams2.createUserId = this.$store.state.user.userId;
    this.getList();
    this.getList2();
  },
  methods: {
    handleClick(tab, event) {},
    // 多选框选中数据
    handleSelectionChange(selection) {},
    getList() {
      // 已提交是1
      // this.queryParams.eventStatus = 1
      listPost(this.queryParams1).then((response) => {
        // this.list1 = response.rows ;
        // let list1 = [{
        //   eventTitle: "你好",
        //   eventType: "66666",
        //   eventCreateTime: "2024-01-01",
        //   eventStatus: 1,
        //   eventDetail: '议题内容44444',
        //   eventFileName: "需求.txt"
        // }]
        let list1 = response.rows;
        this.list1 = list1;
        // this.list1 = list1.map((item) => {
        //   let arr = this.eventStatusOptions.filter(
        //     (status) => status.value == item.eventStatus
        //   );
        //   return {
        //     ...item,
        //     eventStatus: arr[0].label,
        //   };
        // });
        this.total1 = response.total;
        // this.loading = false;
      });
    },
    // 草稿是0
    getList2() {
      // this.queryParams.eventStatus = 0
      listPost(this.queryParams2).then((response) => {
        // this.postList = response.rows ;
        // let postList = [{
        //   eventTitle: "你好",
        //   eventType: "66666",
        //   eventCreateTime: "2024-01-01",
        //   eventStatus: 1
        // }]
        let postList = response.rows;
        this.postList = postList;
        // this.postList = postList.map((item) => {
        //   let arr = this.eventStatusOptions.filter(
        //     (status) => status.value == item.eventStatus
        //   );
        //   return {
        //     ...item,
        //     eventStatus: arr[0].label,
        //   };
        // });
        this.total2 = response.total;
        // this.loading = false;
      });
    },
    toView(row) {
      this.title = "";
      this.formData = JSON.parse(JSON.stringify(row));
      this.visible = true;
    },
    toEdit(row) {
      this.title = "";
      this.formData = JSON.parse(JSON.stringify(row));
      this.visibleCommitDialog = true;
    },
    // 关闭事项提交
    callback(row) {
      this.visibleCommitDialog = false;
    },
  },
};
</script>

<style scoped>
::v-deep .el-dialog {
  height: 900px;
}
</style>
